<template>
  <div>
    <shop-header>{{ title }}</shop-header>
    <div class="shop-user-body">
      <mt-cell class="mint-field" title="福豆来源" align="left">
        <div><input v-model="douName" @click="popupDouVisible = true" readonly placeholder="请选择" type="text" class="mint-field-core"/></div>
      </mt-cell>
      <mt-cell class="mint-field" title="银行卡" align="left">
        <div><input v-model="configName" @click="showConfigPop" readonly placeholder="请选择" type="text" class="mint-field-core"/></div>
      </mt-cell>
      <mt-field label="开户人姓名" align="left" placeholder="选择银行卡自动填入" v-model="cashData.bankUser" readonly></mt-field>
      <mt-field label="开户地" align="left" placeholder="选择银行卡自动填入" v-model="cashData.bankCity" readonly></mt-field>
      <mt-field label="银行卡号" align="left" placeholder="选择银行卡自动填入" v-model="cashData.bankCard" readonly></mt-field>
      <mt-field label="可用福豆" align="left" v-model="configData.dou" readonly></mt-field>
      <mt-field label="可兑现比例" align="left" v-model="configData.rateStr" readonly></mt-field>
      <mt-cell class="mint-field" title="兑现福豆" align="left">
        <div class="popup-calculation-btn">
          <div :class="this.canReduce ? '' : 'forbidden'" @click="add(-100)">-</div>
          <div class="num">{{ this.cashData.drawMoney }}</div>
          <div :class="this.canAdd ? '' : 'forbidden'" @click="add(100)">+</div>
        </div>
      </mt-cell>

      <div style="height: 15px"> </div>
      <mt-button :type="buttonClass" size="large" @click="saveCashinfo">{{ buttonName }}</mt-button>
    </div>
    <mt-popup v-model="popupDouVisible" position="bottom" class="mint-popup" style="width: 100%">
      <div style="background: #FFFFFF;padding: 10px;height: 30px;">
        <mt-button type="default" size="small" style="float: left" @click="popupDouVisible = false">取消</mt-button>
        <mt-button type="primary" size="small" style="float: right" @click="saveDou()">保存</mt-button>
      </div>
      <div style="clear: both">
        <mt-picker :slots="slotsDou" :show-toolbar="false" ref="picker" value-key="name"></mt-picker>
      </div>
    </mt-popup>
    <mt-popup v-model="popupConfigVisible" position="bottom" class="mint-popup" style="width: 100%">
      <div style="background: #FFFFFF;padding: 10px;height: 30px;">
        <mt-button type="default" size="small" style="float: left" @click="popupConfigVisible = false">取消</mt-button>
        <mt-button type="primary" size="small" style="float: right" @click="saveConfig()">保存</mt-button>
      </div>
      <div style="clear: both">
        <mt-picker :slots="slotsConfig" :show-toolbar="false" ref="picker2" value-key="name"></mt-picker>
      </div>
    </mt-popup>
  </div>
</template>

<script>
import {Cell, MessageBox} from 'mint-ui';
import Header from '../components/header';
import request from "../utils/request";
import {Indicator} from 'mint-ui';
import util from "../utils/util";

export default {
  components: {
    Cell,
    shopHeader: Header,
  },
  data() {
    return {
      title: "福豆兑现",
      popupDouVisible: false,
      popupConfigVisible: false,
      cashData: {
        accountType: 0,
        bankId: 0,
        bankUser: "",
        bankCity: "",
        bankCard: "",
        drawMoney: 0,
      },
      configData: {
        dou: 0,
        rate: 0,
        maxCash: 0,
        rateStr: "",
      },
      douName: "",
      configName: "",
      cardList: [],
      banks: [],
      types: {},
      canAdd: false,
      canReduce: false,
      buttonName: "保存",
      buttonClass: "danger",
      slotsDou: [
        {
          flex: 1,
          values: [
              { id:1, name: "个人福豆兑现"},
              { id:2, name: "团队福豆兑现"},
          ],
          className: 'slot1',
          textAlign: 'center'
        }
      ],
      slotsConfig: [
        {
          flex: 1,
          values: [""],
          className: 'slot1',
          textAlign: 'center'
        }
      ]
    }
  },
  async created() {
    let bankObj = await util.getFromCache("bankStr", "/ajax/member/bankInfo");
    this.banks = [];
    for(let i in bankObj){
      this.banks.push({id: i, name:bankObj[i]});
    }
    Indicator.open();
    const res = await request({}, "/ajax/member/getCashInfo");
    if(res && res.code == 0){
      this.cardList = res.data.cardList;
      this.types = res.data.types;
      this.cardList.forEach((o)=>{
        o.name = bankObj[o.bankId] + " " + o.bankCity + " " + o.bankUser;
      });
      this.$refs.picker2.setSlotValues(0, this.cardList);
      if(res.data.timeWarn){
        this.buttonName = res.data.timeWarn;
        this.buttonClass = "disabled";
      }
    }
    Indicator.close();
  },
  methods: {
    saveCashinfo() {
      if(this.buttonName != "保存") return;
      if(!this.cashData.accountType){
        util.toast("请选择兑现福豆来源!");
        return;
      }
      if(!this.cashData.bankId){
        util.toast("请选择银行卡!");
        return;
      }
      if(this.cashData.drawMoney < 100){
        util.toast("兑现金额不足100!");
        return;
      }
      MessageBox.confirm('确定要申请兑现' + this.cashData.drawMoney + '福豆吗?').then(action => {
        request(this.cashData, "/ajax/member/addCashInfo").then(res => {
          if(util.warnFunc(res)) return;
          if(res.code == 0){
            util.toast("兑现申请成功");
            this.$router.push({
              path: '/user',
            });
          }
        });
      });
    },
    showConfigPop() {
      if(this.cardList.length == 0){
        this.$router.push({
          path: '/cashconfig-list',
        });
        return;
      }
      this.popupConfigVisible = true;
    },
    add(num) {
      if(!this.cashData.accountType) return;
      if(num < 0 && this.cashData.drawMoney + num < 200) return;
      if(num > 0 && this.cashData.drawMoney + num > this.configData.maxCash) return;
      this.cashData.drawMoney += num;
      this.judgeBtn();
    },
    judgeBtn() {
      this.canReduce = this.cashData.drawMoney > 200;
      this.canAdd = this.cashData.drawMoney < (this.configData.maxCash - 100);
    },
    saveDou() {
      let type = this.$refs.picker.getSlotValue(0);
      this.cashData.accountType = type.id;
      this.configData = this.types[type.id];
      this.douName = type.name;
      this.configData.rateStr = this.configData.rate * 100 + "%";
      this.cashData.drawMoney = this.configData.maxCash >= 200 ? 200 : 0;
      this.judgeBtn();
      this.popupDouVisible = false;
    },
    saveConfig() {
      let config = this.$refs.picker2.getSlotValue(0);
      this.configName = config.name.split(" ")[0];
      this.cashData.bankId = config.bankId;
      this.cashData.bankUser = config.bankUser;
      this.cashData.bankCity = config.bankCity;
      this.cashData.bankCard = config.bankCard;

      this.popupConfigVisible = false;
    }
  }
}

</script>

<style scoped>
p {
  margin: 0;
  padding: 0;
}

.shop-user-body {
  width: 95%;
  margin: auto;
}

.popup-calculation-btn {
  height: 30px;
  display: flex;
  border: 1px solid #ccc;
  border-right: 0;
  margin-right: 20px;
}
.popup-calculation-btn > div {
  width: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-right: 1px solid #ccc;
}
.popup-calculation-btn > div.num{
  width: 60px;
}
.popup-calculation-btn > div.forbidden{
  background: #EEEEEE;
}
</style>
